<html>
<head th:include="/views/mobile/partial/head_live"></head>
<style type="text/css">
  

.circle-image{
	-moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

</style>

<body>

    <section th:replace="/views/mobile/partial/header(title='范客直播')"></section>
    
    <section th:replace="/views/mobile/partial/cover"></section>
  <div class="wrap-container">
    
    
    <div class="introContainer clearfix">

          <div class="intoImg">
              <img th:src="${live.coverImage}" />
              <!--img src="http://www.faxsun.com/faxsun-info/src/img/live/cesasia2015/cesdescbanner.png" /-->
              <img class="circle-image" style="width:30px;height:30px;display:inline;" th:src="${liveAdmin.avatar}"/>
              <span th:text="${liveAdmin.name}" ></span>
          </div>
          <div class="introContext"  fx="limit-context" th:attr="context=${live.topic + ' - ' + live.description}" limitNum="60">
              <span class="content" ></span>
          </div>
      
    </div>
   


   <div class="date-tab-container clearfix">
			<strong class="pleaseChooseDate">时光轴: </strong>

			<div th:each="liveDate : ${liveDateRange}">
				<span class="tab" th:attr="date-val=${liveDate.dayString}" th:text="${liveDate.monthDayString}">date</span>
			</div>

			<a href="#" class="refresh" id="refresh-live"
				th:onclick="'javascript:refresh();return false;'" title="刷新消息"><i
				class="fa fa-refresh"></i></a>

		</div>
   


    <div class="timelineContainer"  th:if="${timelines.size()>0}">
                
                <div  class="timeline clearfix" th:each="timeline : ${timelines}">
                      <div class="timelineTypePicContainer" >
                          <img class="typeImg" th:src="@{/lib/vertical_timeline/img/cd-icon-location.svg}"
                            alt="Location" />
                      </div>

                      <div class="timelineContentContainer">
                         <div class="date-div">
                            <strong class="reporter">
                               <img class="circle-image " style="width:30px;height:30px;" th:src="${timeline.user.avatar}" />
                               <span th:utext="${timeline.user.name} + '@' + ${live.topic} + ':'"></span>
                            </strong>                               
                            <br/> 
                            <span class="cd-date"
							th:text="${#dates.format(timeline.date, 'yyyy-MMM-dd HH:mm')}">2015-05-25
							</span> 
							<span class="qDate"
							th:attr="data-date=${#dates.day(timeline.date)}"
							style="display: none"
							th:text="${#dates.year(timeline.date)} + '.' + ${#dates.month(timeline.date)} + '.' + ${#dates.day(timeline.date)} + ' ' + ${#dates.hour(timeline.date)} + ':' + ${#dates.minute(timeline.date)} + ':' + ${#dates.second(timeline.date)}">2015.05.25
							00:00:00
							</span>
					      </div>
					      <div class="content">
						       <p th:utext="${timeline.content.text}">范客直播</p>
						       <div th:each="tiImg : ${timeline.content.url}">
						         <div th:if="${#strings.endsWith(tiImg,'mp4') == true}" class="video_box"  th:attr="videoSrc=${tiImg}" onclick="startLoadVideo(this)">
                                    <span class="clickmeLoadVideo">点我加载视频</span>
                                 </div>
							     <img th:if="${#strings.endsWith(tiImg,'mp4') == false}" th:src="${tiImg}" alt="范客直播" />
							     <br/> 
							     <br/> 
							     <br/>
						</div>
						  </div>
				      </div>
                </div>


  </div>


    <section th:replace="/views/mobile/partial/toTop"></section>
  </div>
    
<script type="text/javascript" th:src="@{/src/js/faxsun.jq.plugin.js}"></script>
<script type="text/javascript" th:src="@{/src/js/faxsun-for-mobile.js}"></script>
<script type="text/javascript" th:src="@{/src/js/faxsun.jq.account.js}"></script>
<script type="text/javascript">
  $(function(){

        $(".timelineTypePicContainer").height($(".timelineTypePicContainer").width());
       set_cover_toggle();
        hideOrShowTotop();
        initDateTabNav();

  });

</script>
<script th:inline="javascript">
var checkAnyNewId;
$(document).ready(function() {
    $("#refresh-live").hide();
    var checkAnyNewFlag = [[${checkAnyNew}]]
    if(checkAnyNewFlag){
       checkAnyNewId = setInterval(checkAnyNew, 1000);    	
    }
});

//var pathArray = window.location.pathname.split('/');
//var context = pathArray[1];
var checkNewUrl = [[${ctx}]] + '/live/pcbroadcast/' + [[${live.id}]] + '/checkAnyNew';

var refresh = function() {
    window.location.href = [[${ctx}]] + '/live/pcbroadcast/' + [[${live.id}]] + '/timeline';
};

var checkAnyNew = function() {
    $.ajax({
        type: "POST",
        data: {
            "startMsgId": [[${startMsgId}]]
        },
        url: checkNewUrl,
        success: function(data) {
            if (data == 'true') {
                $("#refresh-live").show();
                clearInterval(checkAnyNewId);
            } else {
                $("#refresh-live").hide();
            }
        },
        error: function(xhr, error) {
            alert(error + "-更新出错，请稍后再试");
        }
    });
}
</script>
</body>
</html>